﻿<sh:BasePage
    x:Name="pageRoot"
    x:Class="CorpStore.AppDetailsPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="using:CorpStore"
    xmlns:vm="using:CorpStore.ViewModels"
    xmlns:common="using:CorpStore.Common"
    xmlns:sh="using:StoreHelper"
    RequestedTheme="Light"
    mc:Ignorable="d">

    <!-- set design time data context -->
    <Page.DataContext>
        <vm:FakeViewModel/>
    </Page.DataContext>

    <!-- Set of resources local to this page (CollectionViewSource, DataTemplates, etc.) -->
    <Page.Resources>
        <!-- Collection of items displayed by this page -->
    </Page.Resources>

    <Page.BottomAppBar>
        <CommandBar>
            <!--<AppBarButton Name="btnPinUnpin" Label="{Binding PinUnpinLabel}" Icon="{Binding PinUnpinIcon}" Click="btnPinUnpin_Click"/>-->
        </CommandBar>
    </Page.BottomAppBar>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Style="{StaticResource LayoutRootStyle}" Margin="0,-3,0,3" >
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Row 0: Back button and page title -->
        <Grid Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="120"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <AppBarButton x:Name="backButton" Grid.Column="0" Margin="39,59,39,0" Icon="Back" Foreground="Black" Style="{StaticResource NavigationBackButtonNormalStyle}"
                          Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}" />
            <TextBlock x:Name="pageTitle" Grid.Column="1" Text="{Binding CurrentApp.DisplayName}" Style="{StaticResource HeaderTextBlockStyle}" 
                       IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,0,40"/>
        </Grid>

        <!-- Row 1: Main content -->
        <Grid Grid.Row="1" x:Name="ContentGrid">
            <!-- Landscape view -->
            <Grid x:Name="gridLandscape" Margin="120,0,0,0" >
                <!-- 1 x 2 -->
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="20"/>
                    <ColumnDefinition Width="3*"/>
                </Grid.ColumnDefinitions>
                
                <!-- Left stack panel of install/run button, version, description, etc -->
                <StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <!-- Install Button -->
                        <Button Name="btnInstallRun" Click="btnInstallRun_Click" Background="Green" Foreground="White" Content="{Binding InstallRunText}" Margin="0,0,8,12" />
                        <Button Name="btnPinUnpin" Click="btnPinUnpin_Click" Background="Green" Foreground="White" Content="{Binding PinUnpinText}" Margin="0,0,0,12" />
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" Margin="0,0,0,8">
                        <TextBlock Text="Version" Margin="0,0,4,0"/>
                        <TextBlock Text="{Binding CurrentApp.Version}"/>
                    </StackPanel>
                    
                    <!-- Description -->
                    <StackPanel Margin="0,0,0,16">
                        <TextBlock Text="Description" Style="{StaticResource SubtitleTextBlockStyle}" Margin="0,0,0,8"/>
                        <ScrollViewer MaxHeight="200" VerticalScrollBarVisibility="Auto">
                            <TextBlock Padding="0,0,16,0" TextWrapping="Wrap" Text="{Binding CurrentApp.Description}"/>
                        </ScrollViewer>
                    </StackPanel>
                    
                    <!-- Features -->
                    <StackPanel>
                        <TextBlock Text="Features" Style="{StaticResource SubtitleTextBlockStyle}" Margin="0,0,0,4"/>
                        <ScrollViewer MaxHeight="200" VerticalScrollBarVisibility="Auto">
                            <ItemsControl ItemsSource="{Binding CurrentApp.Features}">
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <Grid Margin="0,0,8,0">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="Auto"/>
                                                <ColumnDefinition/>
                                            </Grid.ColumnDefinitions>
                                            <Ellipse VerticalAlignment="Center" Fill="{StaticResource ApplicationForegroundThemeBrush}" Stroke="{StaticResource ApplicationForegroundThemeBrush}" StrokeThickness="1" Width="4" Height="4" Margin="0,0,8,0"/>
                                            <TextBlock Text="{Binding}" Grid.Column="1" Padding="8,0,4,0" TextWrapping="Wrap" Foreground="{StaticResource ApplicationForegroundThemeBrush}" VerticalAlignment="Center" Margin="0,8,0,8" />
                                        </Grid>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>
                        </ScrollViewer>
                    </StackPanel>
                </StackPanel> <!-- column 0 -->
                
                <!-- Column 2 (right hand side of screen) -->
                <Grid Grid.Column="2">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="8*"/>
                        <RowDefinition Height="2*"/>
                    </Grid.RowDefinitions>
                    
                    <!-- Screenshot list and image -->
                    <ListView x:Name="lstScreenshots" Grid.Row="0" Grid.Column="0" ItemsSource="{Binding CurrentApp.Screenshots}" 
                              Width="120" SelectionMode="None" IsSwipeEnabled="false" IsItemClickEnabled="True" ItemClick="lstScreenshots_ItemClick">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <Image x:Name="imgThumbnail" Source="{Binding ScreenshotImage}" Width="100" Height="100" />
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                    <Grid Grid.Row="0" Grid.Column="1" VerticalAlignment="Center" Margin="0,0,8,0">
                        <Border BorderThickness="3" BorderBrush="Black" VerticalAlignment="Top" CornerRadius="6">
                            <Image x:Name="imgLargeScreenshot" Source="{Binding SelectedScreenshot.ScreenshotImage}" 
                                   MinHeight="300" Stretch="Fill" Margin="6" VerticalAlignment="Top"/>
                        </Border>
                    </Grid>
                    
                    <!-- Package Details -->
                    <Grid Grid.Row="1" Grid.Column="1" Margin="0,6,0,6">
                        <Grid.RowDefinitions>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        
                        <TextBlock Grid.Row="0" Grid.ColumnSpan="2" Text="{Binding SelectedScreenshot.Description}" TextWrapping="Wrap" HorizontalAlignment="Center"/>
                        
                        <StackPanel Grid.Column="0" Grid.Row="1">
                            <!-- Publisher -->
                            <TextBlock Text="Published By" Style="{StaticResource BodyTextBlockStyle}" Margin="0,0,4,4"/>
                            <TextBlock Text="{Binding CurrentApp.PublisherDisplayName}"/>
                        </StackPanel>

                        <!-- Group Name -->
                        <StackPanel Grid.Column="0" Grid.Row="2">
                            <TextBlock Text="Group" Style="{StaticResource BodyTextBlockStyle}" Margin="0,0,4,4"/>
                            <TextBlock Text="{Binding CurrentApp.GroupName}"/>
                        </StackPanel>

                        <StackPanel Grid.Column="1" Grid.Row="1">
                            <!-- Installation Date -->
                            <TextBlock Text="Installed on" Style="{StaticResource BodyTextBlockStyle}" Margin="0,0,4,4"/>
                            <TextBlock Text="{Binding CurrentApp.CreateDate}"/>
                        </StackPanel>
                        
                        <!-- Install Location -->
                        <StackPanel Grid.Column="1" Grid.Row="2">
                            <TextBlock Text="File Location" Style="{StaticResource BodyTextBlockStyle}" Margin="0,0,4,4"/>
                            <TextBlock Text="{Binding CurrentApp.InstalledLocation}" TextWrapping="Wrap"/>
                        </StackPanel>
                    </Grid>
                </Grid>
            </Grid>


            <!-- Portrait View -->
            <Grid x:Name="gridPortrait" Margin="20,0,0,0" Visibility="Collapsed">
                <!-- 2 x 2 -->
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

                <!-- row 0 -->
                <StackPanel Orientation="Horizontal">
                    <Image Source="{Binding CurrentApp.LogoImage}" Stretch="UniformToFill" VerticalAlignment="Center"/>
                    <Button Click="btnInstallRun_Click" Content="{Binding InstallRunText}" Background="Green" Foreground="White" />
                </StackPanel>

                <!-- row 1 -->
                <StackPanel Grid.Row="1">
                    <!-- Description -->
                    <StackPanel Margin="0,0,0,16">
                        <TextBlock Text="Description" Style="{StaticResource SubtitleTextBlockStyle}" Margin="0,0,0,4" />
                        <TextBlock TextWrapping="Wrap" Text="{Binding CurrentApp.Description}"/>
                    </StackPanel>


                    <!-- Features -->
                    <StackPanel>
                        <TextBlock Text="Features" Style="{StaticResource SubtitleTextBlockStyle}" Margin="0,0,0,4"/>
                        <ItemsControl ItemsSource="{Binding CurrentApp.Features}">
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel Orientation="Horizontal" >
                                        <Ellipse VerticalAlignment="Center" Fill="{StaticResource ApplicationForegroundThemeBrush}" Stroke="{StaticResource ApplicationForegroundThemeBrush}" StrokeThickness="1" Width="4" Height="4" Margin="0,0,8,0"/>
                                        <TextBlock Text="{Binding}" Foreground="{StaticResource ApplicationForegroundThemeBrush}" VerticalAlignment="Center" Margin="0,8,0,8" />
                                    </StackPanel>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </StackPanel>

                </StackPanel>
            </Grid>

        </Grid>
        
        <!-- main content grid -->
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="Portrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="gridLandscape" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="gridPortrait" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="FontSize">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="26"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

    </Grid>
    
    <!-- top level grid containing back button row and main content -->

</sh:BasePage>
